{% extends  'templates/base.html' %}

{% block page_main %}
    {% if st_id %}
        <h2 class="sub-header">编辑标准工时信息</h2>
    {% else %}
        <h2 class="sub-header">添加标准工时信息</h2>
    {% endif %}
    <form action="" method="post" novalidate>
        {% csrf_token %}
        {% for field in form_obj %}
            <div class="form-group {% if field.errors.0 %}has-error {% endif %}">
                <label for="{{ field.id_for_label }}" class="col-sm-2 control-label">{{ field.label }}</label>
                {{ field }}
                <span class="help-block">{{ field.errors.0 }}</span>
            </div>
        {% endfor %}
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" class="btn btn-success">
            </div>

        </div>

    </form>
{% endblock %}

{% block js %}

    <script>
    $(document).ready(function (){
        $('#id_customer').on('change',function (){
            // 获取到选中的校区id
            var customer_id = $(this).val();
            // 发送ajax请求到后端取出当前校区下面的所有课程
            $.ajax({
                url:'/plan/ajax_customer/',
                type:'get',
                data:{
                    'customer_id':customer_id
                },
                //请求成功接受结果
                success:function (res){
                    console.log(res);
                    // 找到id_sku 这个标签  机种选择的输入框
                    var $classSelect = $('#id_sku');
                    // 给原来的数据置空，删除以前的数据
                    $classSelect.text('');
                    //添加 默认的 optione html代码  <option value="">-------</option>
                    $classSelect.append('<option value="">-------</option>');
                    //循环后端返回的数据
                    $.each(res.data,function (k,v){
                        console.log(k,v);
                        //声明option标签
                        var opEle = document.createElement('option');
                        // 给后端返回的数据添加到标签中
                        $(opEle).text(v.name).attr('value',v.id)
                        //数据添加到选课框中
                        $classSelect.append(opEle)

                    })
                }
            })
        })
    })
    </script>

{% endblock %}